/* ============================================================
   NavigateCyber / AiComply — Responsive Hardening Layer
   ------------------------------------------------------------
   Shared, mobile-first overrides loaded on every page, after
   components.css and before each page's inline <style> block.

   Consolidated breakpoint scale (max-width):
        1024px  small laptop / landscape tablet
         768px  portrait tablet
         560px  large phone
         400px  small phone (iPhone SE, compact Android)

   Every rule below is scoped inside a <=1024px media query (or is a
   mobile-only browser hint), so the desktop layout (>1024px) renders
   pixel-identical to before this file existed. A leading `html` on a
   selector is an intentional specificity bump so the rule wins over the
   per-page inline <style> blocks without needing !important.
   ============================================================ */

/* Prevent iOS/Android from auto-inflating body text in landscape.
   Mobile-only behaviour by definition; no effect on desktop. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- Overflow safety nets (tablet & down) ---------- */
@media (max-width: 1024px) {
  /* Media never forces horizontal overflow. */
  img,
  svg,
  video {
    max-width: 100%;
  }
  img {
    height: auto;
  }
  /* Long unbreakable strings (URLs, emails, IDs) wrap instead of
     pushing the layout wider than the viewport. */
  body {
    overflow-wrap: break-word;
  }
}

/* ---------- Touch ergonomics (phones & small tablets) ---------- */
@media (max-width: 768px) {
  /* iOS Safari zooms the whole page when a focused input has a
     font-size below 16px. Bump form controls to 16px on touch widths
     so focusing a field no longer triggers the zoom jump. */
  html .ac-input,
  html .ac-select,
  html .ac-textarea {
    font-size: 16px;
  }
  /* Comfortable minimum tap targets for buttons. */
  html .ac-btn {
    min-height: 44px;
  }
}

/* ---------- Container gutters ----------
   The homepage kept a 32px gutter at every width while the other pages
   already dropped to 20px on phones. Standardise the whole site here. */
@media (max-width: 560px) {
  html .nc-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 400px) {
  html .nc-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------- Small-phone typography (<=400px) ----------
   Fluid clamps whose max equals the existing phone size, so at 400px the
   headings match today's layout and only tighten further on very narrow
   screens — the largest display type was the main source of cramping on
   compact devices. */
@media (max-width: 400px) {
  html .nc-hero h1,
  html .nc-hero-text h1 {
    font-size: clamp(28px, 9vw, 40px);
  }
  html .nc-press-hero h1,
  html .nc-contact-hero h1 {
    font-size: clamp(26px, 8.5vw, 34px);
  }
  html .nc-section-title,
  html .nc-solution h2,
  html .nc-cta h2 {
    font-size: clamp(24px, 8vw, 32px);
  }
}